<template>
  <v-container class="fill-height pa-0 chat-drawer-container" fluid>
    <template v-if="!$vuetify.breakpoint.smAndDown">
      <v-row no-gutters>
        <v-col cols="3" class="chat-contact--sidebar white">
          <chat-contact-list></chat-contact-list>
        </v-col>
        <v-col cols="9">
          <chat-contact-profile></chat-contact-profile>
        </v-col>
      </v-row>
    </template>
    <template v-else>
      <v-layout column>
        <v-flex sm12 class="white" v-if="showSidebar">
          <chat-contact-list></chat-contact-list>
        </v-flex>

        <v-flex sm12 v-if="showWindow">
          <chat-contact-profile></chat-contact-profile>
        </v-flex>
      </v-layout>
    </template>
  </v-container>
</template>

<script>
import ChatContactList from '@/components/chat/ChatContactList'
import ChatContactProfile from '@/components/chat/ChatContactProfile'
export default {
  components: {
    ChatContactList,

    ChatContactProfile
  },

  data() {
    return {
      chat: null,

      selectedTab: null
    }
  },

  computed: {
    showSidebar() {
      return this.$route.params.uuid === undefined
    },

    showWindow() {
      return this.$route.params.uuid !== undefined
    }
  }
}
</script>
